$(document).ready(function(){
     var str='';
     var current_page = 1;
     var num_page = 0;
     var count = 0; // item in a page
     var index = 1; // index = page number

     // Load all item (#All)
     $.each($('.portfolio-entry'),function(){

          if(!$(this).hasClass('hidden')){
               if(count == 6){
                    index ++;
                    count = 0;
               }
               $(this).addClass(index.toString()); // set page index
               count ++;

          }
     });
     $.each($('.portfolio-entry'),function(){
          if(!$(this).hasClass('1')){
               $(this).css('display', 'none');
          }

     });

     if (count == 0){
          num_page = index - 1;
     } else {
          num_page = index;
     }

     // $('#left').html('0');
     $('#right').html('2');

     // porfolio-filter clicked
     $('#portfolio-filter li a').click(function(){
          index = 1;
          current_page = 1;
          $('#left').html('');
          $('#right').html(2);
          $.each($('.portfolio-entry'),function(index, value){
               if ($(this).hasClass('1')){
                    $(this).removeClass('1');
               } else if ($(this).hasClass('2')){
                    $(this).removeClass('2');
               } else if ($(this).hasClass('3')){
                    $(this).removeClass('3');
               } else if ($(this).hasClass('4')){
                    $(this).removeClass('4');
               } else if ($(this).hasClass('5')){
                    $(this).removeClass('5');
               } else if ($(this).hasClass('6')){
                    $(this).removeClass('6');
               } else if ($(this).hasClass('7')){
                    $(this).removeClass('7');
               } else if ($(this).hasClass('8')){
                    $(this).removeClass('8');
               } else if ($(this).hasClass('9')){
                    $(this).removeClass('9');
               }

               var class_string = $(this).attr("class");

               if (!$(this).hasClass('.hidden'))
                    $(this).css('display','list-item');
          });


          count = 0; // item in a page
          $.each($('.portfolio-entry'),function(){

               if(!$(this).hasClass('hidden')){
                    $(this).addClass(index.toString()); // set page index
                    count ++;
                    if(count == 6){
                         index ++;
                         count = 0;
                    }
               }
          });
          $.each($('.portfolio-entry'),function(){
               if(!$(this).hasClass('1')){
                    $(this).css('display', 'none');
               }

          });
          if (count == 0){
               num_page = index -1;
          } else {
               num_page = index;
          }
          if(num_page <= 1 ){
               $('#left').css('display','none');
               $('#right').css('display','none');
          } else {
               $('#left').css('display','block');
               $('#right').css('display','block');
          }
     }); // end #portfolio-filter li a clicked





     $('#left').click(function(){

          current_page--;
          $.each($('.portfolio-entry'),function(){
               if(!$(this).hasClass(current_page.toString())){
                    //$(this).css('display', 'none');
                    $(this).animate({'display':'none', 'margin-right':'0px','opacity':'hide'}, 1000,'easeOutCubic')
               }else{
                    $(this).animate({'display':'list-item', 'margin-right':'20px','opacity':'show'}, 1000,'easeInCubic')
//                    $(this).css('display', 'list-item');
               }
          });

          if (current_page > 1){
               $('#right').css('display','inline');
               $('#right').html(current_page + 1);
               $('#left').html(current_page - 1);

          } else if (current_page == 1){
               $('#left').css('display','none');
               $('#right').html(current_page + 1);
               $('#right').css('display','inline');
          }


     }); // end #left clicked

     $('#right').click(function(){
          current_page++;
          $.each($('.portfolio-entry'),function(){
               if(!$(this).hasClass(current_page.toString())){
                    //$(this).css('display', 'none');
                    $(this).animate({'display':'none', 'width':'hide','margin-right':'0px','opacity':'hide'}, 1000,'easeOutCubic')
               }else{
                   // $(this).css('display', 'list-item');
                   $(this).animate({'display':'list-item','width':'show', 'margin-right':'20px','opacity':'show'}, 1000,'easeInCubic')
               }

          });
          if (current_page < num_page){
               $('#right').html(current_page + 1);
               $('#left').html(current_page - 1);
               $('#left').css('display','inline');
          } else if (current_page == num_page) {
               $('#right').css('display','none');
               $('#left').html(current_page - 1);
               $('#left').css('display','inline');

          }

     });  // end #right clicked
});